<template>
  <div class="screen-container">
    <header class="screen-header">
      <div>
        <img  alt="">
      </div>
      <span class="logo">
        <img  alt="" />
      </span>
      <span class="title">电商平台实时显示系统</span>
      <div class="title-right">
        <img src="../../public/static/img/qiehuan_dark.png" class="qiehuan" @click="handleChangeTheme">
        <span class="showTime">当前时间：2022-10-01 00:00:00</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="[fullScreenStatus.trend ? 'fullscreen' : '']">
          <!-- 销量趋势图表 -->
          <Trend ref="trend"></Trend>
          <div class="resize">
            <!-- icon-compress-alt 缩小-->
           <span @click="changeSize('trend')" :class="['iconfont', fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>

        <div id="left-bottom" :class="[fullScreenStatus.seller ? 'fullscreen' : '']">
          <!-- 商家销售金额图表 -->
          <Seller ref="seller"></Seller>
          <div class="resize">
            <span @click="changeSize('seller')" :class="['iconfont', fullScreenStatus.seller ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>

      <section class="screen-middle">
        <div id="middle-top" :class="[fullScreenStatus.map ? 'fullscreen' : '']" >
          <!-- 商家分布图表 -->
          <Map ref="map"></Map>
          <div class="resize">
            <span @click="changeSize('map')" :class="['iconfont', fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>

        <div id="middle-bottom" :class="[fullScreenStatus.rank ? 'fullscreen' : '']">
          <!-- 地区销量排行图表 -->
          <Rank ref="rank"></Rank>
          <div class="resize">
            <span @click="changeSize('rank')" :class="['iconfont', fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>

      <section class="screen-right">
        <div id="right-top" :class="[fullScreenStatus.pie ? 'fullscreen' : '']">
          <!-- 热销商品占比图表 -->
          <Pie ref="pie"></Pie>
          <div class="resize">
            <span @click="changeSize('pie')" :class="['iconfont', fullScreenStatus.pie ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>

        <div id="right-bottom" :class="[fullScreenStatus.stock ? 'fullscreen' : '']">
          <!-- 库存销量分析图表 -->
          <Stock ref="stock"></Stock>
          <div class="resize">
            <span @click="changeSize('stock')" :class="['iconfont', fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import Pie from '@/components/Pie.vue'
import Map from '@/components/Map.vue'
import Rank from '@/components/Rank.vue'
import Seller from '@/components/Seller.vue'
import Stock from '@/components/Stock.vue'
import Trend from '@/components/Trend.vue'
// import { mapState } from 'vuex'
// import { getThemeValue } from '@/utils/theme_utils'
export default {
  // 注册接收到数据的回调函数
  created () {
    this.$socket.registerCallBack('fullScreen', this.recvData)
  },
  destroyed () {
    this.$socket.unRegisterCallBack('fullScreen')
  },
  data () {
    return {
      // 每一个图表的全屏状态定义
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        pie: false,
        stock: false
      }
    }
  },
  components: {
    Pie,
    Map,
    Rank,
    Seller,
    Stock,
    Trend
  },
  // 在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，
  // 所以一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。
  // 与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，
  methods: {
    // changeSize (chartName) {
    //   // 1.改变fullScreenStatus的数据
    //   this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName]
    //   // 2.需要调用每一个组件的screenAdapter方法
    //   this.$nextTick(() => {
    //     this.$refs[chartName].screenAdapter()
    //   })
    // }

    // 实现多屏联动
    // 发送全屏数据给服务端，服务端在收到这个数据时，会转发给每一个处于连接状态的客户端
    changeSize (chartName) {
      const targetValue = !this.fullScreenStatus[chartName]
      this.$socket.send({
        action: 'fullScreen',
        socketType: 'fullScreen',
        chartName: chartName,
        value: targetValue
      })
    },
    // 接收到全屏数据之后的处理
    recvData (data) {
      console.log(data)
      // 取出是哪一个图表需要切换
      const chartName = data.chartName
      // 需要切换成什么状态
      const targetValue = data.value
      this.fullScreenStatus[chartName] = targetValue
      this.$nextTick(() => {
        this.$refs[chartName].screenAdapter()
      })
    },
    handleChangeTheme () {
      // 修改Vuex中的数据
      this.$store.commit('changeTheme')
    }
  },
  computed: {
  }
}

let t = null
t = setTimeout(time, 1000) // 開始运行
function time () {
  clearTimeout(t) // 清除定时器
  const dt = new Date()
  const year = dt.getFullYear()
  const mouth = dt.getMonth() + 1
  const day = dt.getDate()
  const hours = dt.getHours() // 获取时
  const minutes = dt.getMinutes()// 获取分
  const seconds = dt.getSeconds() // 获取秒
  document.querySelector('.showTime').innerHTML =
  '当前时间：' + year + '年' + mouth + '月' + day + '-' + hours + '时' + minutes + '分' + seconds + '秒'
  t = setTimeout(time, 1000)// 设定定时器，循环运行
}
</script>
<style lang="less" scoped>
// 全屏样式的定义
// !importanrt可以覆盖父级的样式
.fullscreen {
  position: fixed!important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
      img {
        width: 100%;
      }
    }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position:absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 128px;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
      position: relative;
    }
    #left-bottom {
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 28%;
      position: relative;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 46%;
      position: relative;
    }
    #right-bottom {
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>
